<template>
  <div class="address_page">
    <u-navbar
      title="收货地址"
      :autoBack="true"
      bgColor="#fff"
      height="88rpx"
      leftIconSize="34"
      placeholder
    ></u-navbar>
    <view class="container">
      <Card style="padding: 30rpx">
        <u-swipe-action-item
          :options="[{ text: '删除', style: { backgroundColor: '#e65e5a' } }]"
        >
          <view class="address_box">
            <view class="address_info">
              <text class="h2">阿达 15800000000</text>
              <view class="address_all">
                北京市海淀区恒大新宏福苑西区20号楼2单
                北京市海淀区恒大新宏福苑西区20号楼2单
                北京市海淀区恒大新宏福苑西区20号楼2单
              </view>
            </view>
            <view class="address_edit">
              <image
                style="height: 48rpx; width: 48rpx"
                src="@/static/icon/edit.png"
                mode="aspectFill"
              />
            </view>
          </view>
        </u-swipe-action-item>
      </Card>

      <view class="handler_view">
        <up-button
          class="submit_btn"
          :hairline="false"
          color="#eb5757"
          text="添加新地址"
          shape="circle"
        ></up-button>
      </view>
    </view>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Card from "@/component/Card.vue";
</script>

<style lang="scss" scoped>
.address_page {
  background-color: #f8f9fa;
  min-height: 100%;
  .handler_view{
    padding-top: 60rpx;
  }
  .address_box {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .address_edit {
      padding-top: 20rpx;
    }
    .address_info {
      margin-right: 30rpx;
      flex: 1 0 0;

      .h2 {
        font-weight: normal;
        font-size: 30rpx;
        color: #262424;
        line-height: 35rpx;
      }
      .address_all {
        font-weight: normal;
        font-size: 26rpx;
        color: #666262;
        line-height: 34rpx;
        margin-top: 10rpx;

        // overflow: hidden;
        // -webkit-box-orient: vertical;
        // line-clamp: 2;
        // -webkit-line-clamp: 2; //显示几行
      }
    }
  }
  .container {
    padding: 20rpx 30rpx;
  }
}
</style>
